<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		#box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			padding: 10px;
			border: 10px solid yellow;
		}


		#box2 {
			padding: 100px;
			background-color: #bfa;
		}

		#box4 {
			width: 200px;
			height: 300px;
			background-color: #bfa;
			overflow: auto;
		}

		#box5 {
			width: 450px;
			height: 600px;
			background-color: yellow;
		}
	</style>
	<script type="text/javascript">

		window.onload = function () {
			var box1 = document.getElementById("box1");
			var btn01 = document.getElementById("btn01");
			var box4 = document.getElementById("box4");

			btn01.onclick = function () {
				/*
				 * clientWidth
				 * clientHeight
				 * 	- 这两个属性可以获取元素的可见宽度和高度
				 * 	- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
				 * 	- 会获取元素宽度和高度，包括内容区和内边距
				 *  - 这些属性都是只读的，不能修改
				 */
				//alert(box1.clientWidth);
				//alert(box1.clientHeight);
				//box1.clientHeight = 300;

				/*
				 * offsetWidth
				 * offsetHeight
				 * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
				 */
				//alert(box1.offsetWidth);

				/*
				 * offsetParent
				 * 	- 可以用来获取当前元素的定位父元素
				 *  - 会获取到离当前元素最近的开启了定位的祖先元素
				 * 		如果所有的祖先元素都没有开启定位，则返回body
				 */
				var op = box1.offsetParent;

				//alert(op.id);

				/*
				 * offsetLeft
				 * 	- 当前元素相对于其定位父元素的水平偏移量
				 * offsetTop
				 * 	- 当前元素相对于其定位父元素的垂直偏移量
				 */

				//alert(box1.offsetLeft);

				/*
				 * scrollWidth
				 * scrollHeight
				 * 	- 可以获取元素整个滚动区域的宽度和高度
				 */
				//alert(box4.clientHeight);
				//alert(box4.scrollWidth);

				/*
				 * scrollLeft
				 * 	- 可以获取水平滚动条滚动的距离
				 * scrollTop
				 * 	- 可以获取垂直滚动条滚动的距离
				 */
				//alert(box4.scrollLeft);
				//alert(box4.scrollTop);

				//alert(box4.clientHeight); // 283

				//当满足scrollHeight - scrollTop == clientHeight
				//说明垂直滚动条滚动到底了

				//当满足scrollWidth - scrollLeft == clientWidth
				//说明水平滚动条滚动到底
				//alert(box4.scrollHeight - box4.scrollTop); // 600



			};

		};


	</script>
</head>

<body id="body">
	<button id="btn01">点我一下</button>
	<br /><br />

	<div id="box4">
		<div id="box5"></div>
	</div>



	<br /><br />

	<div id="box3">
		<div id="box2" style="position: relative;">
			<div id="box1"></div>
		</div>
	</div>


</body>

</html>